<template>
  <div class="list-course">
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.id" @click="$router.push({name: 'course-info', params: {courseId: item.id}})">
        <div class="left-image">
          <img :src="item.courseImgUrl || item.image" alt="">
        </div>
        <div class="right-info">
          <h3 v-text="item.courseName || item.name"></h3>
          <p v-html="item.previewFirstField"></p>
          <p class="count" v-if="item.price">
            <span class="new-count">￥{{ item.discounts }}</span>
            <s class="old-count">￥{{ item.price }}</s>
            </p>
        </div>
      </van-cell>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { pullRefresh } from 'vant'

export default {
  name: 'ListCourse',
  props: {
    callBack: {
      type: Function,
      require: true
    }
  },
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      currentPage: 1,
      isRefreshing: false
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    async onRefresh () {
      this.currentPage = 1
      const { data } = await this.callBack({
        currentPage: this.currentPage,
        pageSize: 10,
        courseName: '',
        status: 1
      })
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list = data.data.records
      } else if (data.content && data.content.length !== 0) {
        this.list = data.content
      }
      this.$toast('刷新成功')
      this.isRefreshing = false
    },
    async onLoad () {
      const { data } = await this.callBack({
        currentPage: this.currentPage,
        pageSize: 10,
        courseName: '',
        status: 1
      })
      this.currentPage++
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list = [...this.list, ...data.data.records]
      } else if (data.content && data.content.length !== 0) {
        this.list = [...this.list, ...data.content]
      }
      this.loading = false
    }
  },
  components: {
    vanPullRefresh: pullRefresh
  }
}
</script>

<style lang="scss" scoped>
.list-course {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.van-cell__value {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 10px 0;
}

.left-image {
  width: 80px;
  height: 100%;
  border-radius: 5px;
}

.left-image img {
  height: 100%;
  width: 100%;
}

p, h3 {
  margin: 0;
}

.right-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5px;
}

.new-count {
  font-size: 20px;
  color: coral;
}

.count {
  flex-grow: 3;
}
</style>
